<template>
  <view>
    <view class="tuijian" v-if="userInfo.pid">
      <view class="tuijian-title">我的推荐人
        <view class="tuijian-title-right" v-if="my_invite.mobile">
          <view class="tuijian-title-right-1">{{my_invite.nickname || my_invite.username || ''}}
          <text style="font-size: 26rpx;margin-left: 24rpx;display: inline-block;">{{my_invite.mobile || ''}}</text>
          </view>
        </view>
        <!-- <view class="bind-user">绑定推荐人</view> -->
      </view>
    </view>
    <view class="tuijian">
      <view class="tuijian-title">我的业绩
        <view class="tuijian-title-right">
          <view class="tuijian-title-right-1">{{yeji_all || 0}}
          </view>
        </view>
        <!-- <view class="bind-user">绑定推荐人</view> -->
      </view>
    </view>
   <view class="tuijian">
      <view class="tuijian-title">当月业绩
        <view class="tuijian-title-right">
          <view class="tuijian-title-right-1">{{yeji_month || 0}}
          </view>
        </view>
      </view>
    </view>
    <view class="level">
      <view class="level-box">
        <view class="tuijian">
          <view class="tuijian-title sticky">我的邀请
            <view class="tuijian-title-right">
              <text @tap="showJian()">查看下级邀请</text>
              <text @tap="showBack()" style="margin-left: 20rpx">返回上级</text>
            </view>
          </view>
          <view class="form" :class="active_index == index?'bg colorfff':''" v-for="(item, index) in zhi_invite" :key="index" @tap="zhiClick(item, index)">
            <view class="form-item">
              <view class="form-item-left"  :class="active_index == index?'colorfff':''">名称</view>
              <view class="form-item-right"  :class="active_index == index?'colorfff':''">{{item.nickname || item.username}}</view>
            </view>
            <view class="form-item">
              <view class="form-item-left"  :class="active_index == index?'colorfff':''">流水</view>
              <view class="form-item-right"  :class="active_index == index?'colorfff':''">{{item.yeji}}</view>
            </view>
            <view class="form-item">
              <view class="form-item-left"  :class="active_index == index?'colorfff':''">推荐奖励</view>
              <view class="form-item-right"  :class="active_index == index?'colorfff':''">{{item.day_bonus || 0}}</view>
            </view>
            <view class="form-item" v-for="(ele, idx) in item.contract" :key="idx">
              <view class="form-item-left"  :class="active_index == index?'colorfff':''">{{ele.coupon_name}}</view>
              <view class="form-item-right"  :class="active_index == index?'colorfff':''">*{{ele.stock}}</view>
            </view>
          </view>
        </view>
        <view class="no-data" v-if="zhi_invite.length ==0 && flag==1">暂无数据</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        my_invite: {},
        zhi_invite: [],
        flag: 1,
        active_user: null,
        active_index: -1,
        userInfo: {},
        yeji: 0,
        yeji_all: 0,
        yeji_month: 0,
        monthStart: 0,
        monthEnd: 0,
        userArr: []
      }
    },
    onLoad() {
    	this.userInfo = vk.getVuex('$user.userInfo')
    },
    onShow() {
      this.getMyInvite()
      this.getInvite()
      let {monthStart, monthEnd} = vk.pubfn.getCommonTime(new Date())
      this.monthEnd = monthEnd
      this.monthStart = monthStart
      
    },
    methods: {
      getMyInvite() {
        // 获取我的推荐人
        if (this.userInfo.pid) {
          vk.callFunction({
            url: 'user/kh/userList',
            title: '加载中...',
            data: {
              user_id: this.userInfo.pid
            },
            success: (info) => {
             if (info.rows.length > 0) {
                this.my_invite = info.rows[0]
             }
            }
          })
        }
      },
      async getInvite() {
        // 获取我的直推
        let search_id
        if (this.userArr.length == 0) {
          search_id = this.userInfo._id
          // search_id = '6505a5e099c6246543ac6566'
        } else {
          search_id = this.userArr[this.userArr.length - 1]._id
        }
        let info = await vk.callFunction({
          url: 'user/kh/userList',
          title: '加载中...',
          data: {
            pid: search_id,
          },
        })
        let money = 0
        let money_month = 0
        if (info.rows.length > 0) {
          for (let i =0;i< info.rows.length; i++) {
            let item = info.rows[i]
            item.yeji = 0
            item.yeji_month = 0
            // 拿到推荐关系 计算推荐加速
             let bonusRelate = await vk.callFunction({
               url: 'user/kh/bonusRelateList',
               title: '加载中...',
               data: {
                 status: 1,
                 tuijian_id: search_id,
                 origin_id: item._id,
                 type: 1
               }
             })
             let amount = 0
             if (bonusRelate.rows.length > 0) {
               for (let j = 0; j < bonusRelate.rows.length;j++) {
                 amount += bonusRelate.rows[j].tuijian_per_bonus
               }
             }
             item.day_bonus = amount
             // 拿到合同  计算业绩
             let contractArr = await vk.callFunction({
               url: 'user/kh/contractList',
               title: '加载中...',
               data: {
                 status: 1,
                 user_id: item._id,
                 type: 1
               }
             })
             if (contractArr.rows.length > 0) {
               for (let k = 0; k< contractArr.rows.length; k++) {
                 item.yeji += contractArr.rows[k].price
                 if (contractArr.rows[k]._add_time >= this.monthStart && contractArr.rows[k]._add_time <= this.monthEnd) {
                   item.yeji_month += contractArr.rows[k].price
                 }
               }
             }
             item.contract = contractArr.rows
             money += item.yeji
             money_month +=item.yeji_month
          }
          this.yeji_all = money
          this.yeji_month = money_month
    
             this.zhi_invite = info.rows
        } else {
          this.zhi_invite = []
        }
      },
      zhiClick(item, index) {
        if (this.active_index == index) {
            this.active_index = -1
        } else {
          this.active_user = item
          this.active_index = index
        }
      },
      returnZhi() {
        this.flag = 1
         this.getInvite()
      },
      showJian() {
        if (!this.active_user) {
          return vk.toast('请点击选择一位用户', 'none');
        }
        this.userArr.push(this.active_user)
        this.active_index = -1
        this.getInvite()
      },
      showBack() {
        this.userArr.splice(this.userArr.length-1, 1)
        this.getInvite()
      },
    }
  }
</script>

<style lang="scss">
  .sticky {
    position: sticky;
        left: 0;
        top: 0;
  }
  .level {
    width: 100%;
    position: relative;

    &-box {
      position: absolute;
      top: 0;
      transition: all .3s;
      width: 100%;
      height: 100%;
    }

    &-1 {
      left: 0;
      background-color: #005ECD;
    }

    &-2 {
      left: 100%;
      background: yellow;
    }

    &-3 {
      left: -100%
    }
  }
  .tuijian {
    width: calc(100% - 48rpx);
    padding: 18rpx 24rpx;
    &-title {
      background-color: #005ECD;
      border-radius: 8rpx;
      height: 48rpx;
      color: #fff;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18rpx;
      &-right {
        font-size: 24rpx;
        &-1 {
          font-size: 40rpx;
        }
      }
    }
  }
  .colorfff {
    color: #fff!important;
  }
  .bg {
    background: #005ECD!important;
  }
  .form {
      padding: 24rpx 32rpx;
      width: 638rpx;
      background-color: #fff;
      border-radius: 8rpx;
      margin-top: 24rpx;
  
      &-item {
        display: flex;
        align-items: center;
        height: 44rpx;
  
        &-left {
          color: #5A5A5A;
          font-family: PingFang SC;
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
          width: 300rpx;
        }
  
        &-right {
          flex: 1;
          color: #000;
          font-family: PingFang SC;
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
          text-align: right;
        }
      }
    }
    .no-data {
        width: 100%;
        text-align: center;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        margin-top: 100rpx;
      }
   
</style>